<script setup>
import { useColumnsDict, useCommonConfig } from './hook.js'
import { useAddEditHook } from '@/hooks/crud/index.js'
import { useFormConfigHook } from '@/hooks/usePlusConfigHook.js'
import { getUser } from '@/api/system/user.js'
const { proxy,  primaryKey,apiFn, moduleName,deptOptions } = useCommonConfig()
const emit = defineEmits(['refreshList'])

// 表单初始化数据
const initForm = {
}
const rules = {
  userName: [
    { required: true, message: '用户账号不能为空', trigger: 'blur' },
    { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
  ],
  nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  password: [
    { required: true, message: '用户密码不能为空', trigger: 'blur' },
    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
  ],
  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
  phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
}

const postOptions = ref([])
const roleOptions = ref([])

// 钩子函数
const handlerConfig = {
  beforeInfoFn: async (reqData) => {

    return reqData[[primaryKey]]
  },
  afterInfoFn: (resData) => {
    postOptions.value = resData.posts;
    roleOptions.value = resData.roles;
    return {
      ...resData.data,
      postIds: resData.postIds,
      roleIds: resData.roleIds,
    }
  },
  beforeSubmitFn: (reqData) => {
    return reqData
  },
  afterSubmitFn: (resData) => {
    emit('refreshList')
    return resData
  },
  beforeCloseFn: () => true,
  afterCloseFn: () => {}
}

const { gOpen, gAllExposeOption,gVisible,gFormInstance,gFormData, gIsEdit  } = useAddEditHook({
  moduleName,
  primaryKey,
  initForm,
  rules,
  apiFnConfig:apiFn.apiFnConfig,
  handlerConfig
})

const { gDialogConfig,  gFormConfig} = useFormConfigHook(gAllExposeOption,{
  dialogConfig:{
    width: 800
  },
  formConfig:{
    rowProps:{ gutter:0 },
    colProps:{ span:12 }
  }
});


const {  dictData,  columns, } = useColumnsDict(true,gFormData);
const openHandler = async (row)=>{
  if(!row){
    const { data } = await getUser()
    postOptions.value = data.posts
    roleOptions.value = data.roles
  }
  await gOpen(row)
}

// 暴露
defineExpose({ gOpen:openHandler })
</script>
<template>
  <PlusDialog v-model="gVisible" v-bind="gDialogConfig">
    <PlusForm ref="gFormInstance" v-model="gFormData" :columns="columns" v-bind="gFormConfig" >
      <template #plus-field-deptId>
        <el-tree-select v-model="gFormData.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
      </template>
      <template #plus-field-postIds>
        <el-select v-model="gFormData.postIds" multiple placeholder="请选择">
          <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status*1 === 1"></el-option>
        </el-select>
      </template>
      <template #plus-field-roleIds>
        <el-select v-model="gFormData.roleIds" multiple placeholder="请选择">
          <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status*1 === 1"></el-option>
        </el-select>
      </template>
    </PlusForm>
  </PlusDialog>
</template>
<style lang="scss" scoped></style>
